.cm-button
  /* flex布局使得内部icon和文字得以和谐 */
  display flex
  align-items center
  justify-content center
  /* 清理掉默认的边框和圆角 */
  border-width 1px
  border-style solid
  border-color $app-text-color
  border-radius 0
  margin 0
  /* 抹平行高，用padding决定高度 */
  line-height 1
  padding 12px
  /* 默认文字大小 */
  font-size 14px
  text-align center
  /* 默认颜色 */
  background-color $app-card-bg-color
  color $app-text-color
  
  &:after
    /* 伪元素也要清理掉多余的样式 */
    border 0
    border-radius 0
  
  &.cm-button-shadow
    box-shadow 0 0 5px 2px $app-card-bg-color-shadow
  
  &.cm-button-small
    padding 10px
    font-size 12px
  
  &.cm-button-large
    padding 16px
    font-size 16px
  
  &.cm-button-no-border
    border-width 0
  
  &.cm-button-outlined
    background-color rgba(0, 0, 0, 0)
  
  &.cm-button-primary
    color $app-text-color-reverse
    border-color $app-color-primary
    background-color $app-color-primary
    &.cm-button-outlined
      background-color rgba(0, 0, 0, 0)
      color $app-color-primary
  &.cm-button-success
    color $app-text-color-reverse
    border-color $app-color-success
    background-color $app-color-success
    &.cm-button-outlined
      background-color rgba(0, 0, 0, 0)
      color $app-color-success
  &.cm-button-warning
    color $app-text-color-reverse
    border-color $app-color-warning
    background-color $app-color-warning
    &.cm-button-outlined
      background-color rgba(0, 0, 0, 0)
      color $app-color-warning
  &.cm-button-error
    color $app-text-color-reverse
    border-color $app-color-error
    background-color $app-color-error
    &.cm-button-outlined
      background-color rgba(0, 0, 0, 0)
      color $app-color-error

.cm-button-hovered
  transform: translate(1px, 2px);